<template>
  <button
                class="q-click-wrapper puppeteer_test_create_tribe_button b1l8alrs bobc9nh b1cg7ppz c1nud10e qu-active--textDecoration--none qu-focus--textDecoration--none qu-borderRadius--pill qu-alignItems--center qu-justifyContent--center qu-whiteSpace--nowrap qu-userSelect--none qu-display--inline-flex qu-tapHighlight--white qu-textAlign--center qu-cursor--pointer qu-hover--textDecoration--none qu-hover--bg--blue_light"
                height="30"
                role="button"
                type="button"
                tabindex="0"
                style="
                  font: inherit;
                  padding: 0px 15px 0px 10px;
                  transition-property: box-shadow, background-color;
                  transition-duration: 60ms;
                  transition-timing-function: ease-out;
                  height: 30px;
                  min-width: 30px;
                  position: relative;
                  box-shadow: rgb(46, 105, 255) 0px 0px 0px 1px inset;
                  --button-hoverBg: blue_light;
                  --button-activeBg: #d7e1ff;
                  --button-innerShadow: inset 0 0 0 1px #2e69ff;
                  border-width: 0px;
                  outline: none;
                  color: inherit;
                  background-color: transparent;
                "
              >
                <div
                  class="q-flex qu-alignItems--center qu-justifyContent--center"
                  style="
                    max-width: 100%;
                    transition-property: opacity;
                    transition-duration: 60ms;
                    transition-timing-function: ease-in-out;
                  "
                >
                  <div
                    v-if="icon"
                    class="q-box qu-display--inline-flex"
                    style="
                      transition-property: transform;
                      transition-timing-function: cubic-bezier(
                        0.23,
                        0.19,
                        0.1,
                        1.34
                      );
                      transition-delay: 0ms;
                      transition-duration: 0ms;
                    "
                  >
                    <span
                      class="q-inlineBlock qu-width--20 qu-height--20"
                      width="20"
                      height="20"
                      style="
                        display: inline-block;
                        flex-shrink: 0;
                        line-height: 20px;
                      "
                      ><span
                        class="c8lvhxo c1qi64n3 c13dhsxm"
                        style="
                          width: 20px;
                          height: 20px;
                          --strokeColor: var(--q-colors-text-blue);
                          --fillColor: var(--q-colors-text-blue);
                          --strokeWidth: 1.8;
                        "
                        ><svg
                          v-if="icon == 'circlePlus'"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g
                            class="icon_svg-stroke"
                            stroke="#666"
                            stroke-width="1.5"
                            fill="none"
                            fill-rule="evenodd"
                          >
                            <path
                              d="M12 7v10m-5-5h10"
                              stroke-linecap="round"
                            ></path>
                            <circle cx="12" cy="12" r="9"></circle>
                          </g></svg>
                          <svg
                          v-if="icon == 'compass'"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <g fill-rule="evenodd" fill="none">
                          <path
                            class="icon_svg-stroke"
                            d="M12 21c-4.95 0-9-4.05-9-9s4.05-9 9-9 9 4.05 9 9-4.05 9-9 9z"
                          ></path>
                          <path
                            class="icon_svg-fill_as_stroke"
                            d="M15.233 8.036c.45-.168.9.281.73.731l-1.686 4.498c-.169.506-.562.843-1.012 1.012l-4.498 1.687a.571.571 0 0 1-.73-.731l1.686-4.498c.169-.506.562-.843 1.012-1.012l4.498-1.687zM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                          ></path>
                        </g></svg>
                          </span
                    ></span>
                  </div>
                  <div
                    class="q-text qu-display--inline-flex qu-alignItems--center qu-overflow--hidden puppeteer_test_button_text qu-medium qu-color--blue qu-ml--tiny"
                    style="font-size: 13px"
                  >
                    <div
                      class="q-text qu-ellipsis qu-whiteSpace--nowrap"
                      style="line-height: normal"
                    >
                      {{ text }}
                    </div>
                  </div>
                </div>
              </button>
</template>
<script>
export default {
  name: 'plan-btn',
  props: {
    text: String,
    icon: String,
  },
};
</script>